<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>欢迎使用基础系统</h1>
      <p>{{ welcomeMessage }}</p>
    </div>

    <el-row :gutter="20">
      <!-- 系统信息卡片 -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="system-info">
            <div class="info-item">
              <span class="label">系统名称：</span>
              <span class="value">基础管理系统</span>
            </div>
            <div class="info-item">
              <span class="label">系统版本：</span>
              <span class="value">v1.0.0</span>
            </div>
            <div class="info-item">
              <span class="label">前端框架：</span>
              <span class="value">Vue 3 + Element Plus</span>
            </div>
            <div class="info-item">
              <span class="label">后端框架：</span>
              <span class="value">Spring Boot + MyBatis-Plus</span>
            </div>
            <div class="info-item">
              <span class="label">数据库：</span>
              <span class="value">MySQL</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 用户信息卡片 -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <div class="user-info">
            <div class="avatar-container">
              <el-avatar :size="80" :src="userInfo.avatar || defaultAvatar"></el-avatar>
            </div>
            <div class="info-list">
              <div class="info-item">
                <span class="label">用户名：</span>
                <span class="value">{{ userInfo.username }}</span>
              </div>
              <div class="info-item">
                <span class="label">昵称：</span>
                <span class="value">{{ userInfo.nickname }}</span>
              </div>
              <div class="info-item">
                <span class="label">角色：</span>
                <span class="value">{{ userRoles }}</span>
              </div>
              <div class="info-item">
                <span class="label">上次登录：</span>
                <span class="value">{{ userInfo.lastLoginTime || '首次登录' }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 快捷入口卡片 -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>快捷入口</span>
            </div>
          </template>
          <div class="shortcut-list">
            <el-button type="primary" @click="goToPath('/profile/index')">
              <el-icon><User /></el-icon>
              <span>个人中心</span>
            </el-button>
            <el-button type="success" @click="goToPath('/system/user')" v-if="hasPermission('admin')">
              <el-icon><UserFilled /></el-icon>
              <span>用户管理</span>
            </el-button>
            <el-button type="warning" @click="goToPath('/system/role')" v-if="hasPermission('admin')">
              <el-icon><Avatar /></el-icon>
              <span>角色管理</span>
            </el-button>
            <el-button type="danger" @click="goToPath('/system/menu')" v-if="hasPermission('admin')">
              <el-icon><Menu /></el-icon>
              <span>菜单管理</span>
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import defaultAvatar from '@/assets/images/default-avatar.png'

const store = useStore()
const router = useRouter()

// 欢迎消息
const welcomeMessage = computed(() => {
  const hour = new Date().getHours()
  let message = ''
  if (hour < 6) {
    message = '凌晨好！'
  } else if (hour < 9) {
    message = '早上好！'
  } else if (hour < 12) {
    message = '上午好！'
  } else if (hour < 14) {
    message = '中午好！'
  } else if (hour < 17) {
    message = '下午好！'
  } else if (hour < 19) {
    message = '傍晚好！'
  } else if (hour < 22) {
    message = '晚上好！'
  } else {
    message = '夜深了！'
  }
  
  return `${message}今天是 ${new Date().toLocaleDateString()}`
})

// 用户信息
const userInfo = reactive({
  username: store.getters.name || '未登录',
  nickname: store.getters.name || '未登录',
  avatar: store.getters.avatar,
  lastLoginTime: '2023-01-01 12:00:00'
})

// 用户角色
const userRoles = computed(() => {
  const roles = store.getters.roles || []
  return roles.join(', ') || '无角色'
})

// 判断是否有权限
const hasPermission = (role) => {
  const roles = store.getters.roles || []
  return roles.includes(role)
}

// 跳转到指定路径
const goToPath = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .dashboard-header {
    margin-bottom: 20px;
    text-align: center;

    h1 {
      font-size: 24px;
      color: #303133;
      margin-bottom: 10px;
    }

    p {
      font-size: 16px;
      color: #606266;
    }
  }

  .box-card {
    margin-bottom: 20px;
    height: 350px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .system-info, .user-info {
    .info-item {
      margin-bottom: 15px;
      display: flex;

      .label {
        width: 100px;
        color: #606266;
      }

      .value {
        color: #303133;
        font-weight: bold;
      }
    }
  }

  .user-info {
    .avatar-container {
      text-align: center;
      margin-bottom: 20px;
    }
  }

  .shortcut-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;

    .el-button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100px;

      .el-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>